@import url("../common/common.less");

.talking-box {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../../image/3/卜.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  .text-talking {
    position: absolute;
    z-index: 20003;
    top: 0;
    width: 100%;
    height: 50vh;
    display: none;
    p {
      position: absolute;
    }
    .p1 {
      width: 500px;
      top: 70px;
      overflow: hidden;
      height: 40px;
      padding: 5px;
      border-radius: 10px;
      color: white;
      font-size: 40px;
      animation: myfirst 10s forwards; /*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
      -webkit-animation: myfirst 10s forwards; /* Safari and Chrome */
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
      // animation-iteration-count: infinite;
      // -webkit-animation-iteration-count: infinite;
    }
    .p2 {
      width: 500px;
      top: 230px;
      overflow: hidden;
      height: 40px;
      padding: 5px;
      border-radius: 10px;
      color: white;
      font-size: 40px;
      animation: myfirst 11s forwards; /*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
      -webkit-animation: myfirst 11s forwards; /* Safari and Chrome */
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
      // animation-iteration-count: infinite;
      // -webkit-animation-iteration-count: infinite;
    }
    .p3 {
      top: 470px;
      width: 500px;
      overflow: hidden;
      height: 40px;
      padding: 5px;
      border-radius: 10px;
      color: white;
      font-size: 40px;
      animation: myfirst 7s forwards; /*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
      -webkit-animation: myfirst 7s forwards; /* Safari and Chrome */
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
      // animation-iteration-count: infinite;
      // -webkit-animation-iteration-count: infinite;
    }
    .p4 {
      top: 700px;
      width: 500px;
      overflow: hidden;
      height: 40px;
      padding: 5px;
      border-radius: 10px;
      color: white;
      font-size: 40px;
      animation: myfirst 9s forwards; /*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
      -webkit-animation: myfirst 9s forwards; /* Safari and Chrome */
      animation-timing-function: linear;
      -webkit-animation-timing-function: linear;
      // animation-iteration-count: infinite;
      // -webkit-animation-iteration-count: infinite;
    }
  }
  .video-dialog {
    position: relative;
    display: none;
    .okVideo {
      position: absolute;
      top: 120px;
      right: 60px;
      width: 100px;
      height: 100px;
      z-index: 10001;
    }
    .over-box {
      background-color: black;
      position: absolute;
      width: 100%;
      height: 100vh;
      z-index: 9999;
      opacity: 0.8;
    }
    .phone-img {
      width: 700px;
      position: absolute;
      top: 100px;
      left: calc(50% - 350px);
      z-index: 10000;
      animation-name: handRotate5;
      animation-duration: 0.5s;
      animation-timing-function: linear;
    }
    .hand-img {
      position: absolute;
      display: none;
      right: 60px;
      top: 210px;
      z-index: 10000;
      width: 100px;
      animation-name: handRotate4;
      animation-duration: 0.5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
  }
  .me1 {
    position: absolute;
    right: 10px;
    top: 250px;
    display: none;
    opacity: 0.1;
    animation: handRotate 2s forwards;
    img {
      width: 500px;
    }
  }
  .me2 {
    position: absolute;
    right: 10px;
    top: 560px;
    display: none;
    opacity: 0.1;
    animation: handRotate 2s forwards;
    img {
      width: 500px;
      max-height: 140px;
    }
  }
  .fake1 {
    position: absolute;
    left: 10px;
    top: 420px;
    display: none;
    opacity: 0.1;
    animation: handRotate 2s forwards;
    img {
      width: 565px;
    }
  }
  .fake2 {
    position: absolute;
    left: 10px;
    top: 720px;
    display: none;
    opacity: 0.1;
    animation: handRotate 2s forwards;
    img {
      width: 700px;
    }
  }
  .select {
    position: absolute;
    width: 100%;
    bottom: -100%;
    display: none;
    animation: handRotate2 0.75s forwards;
    img {
      width: 100%;
    }
    .option {
      position: absolute;
      width: 90%;
      top: 200px;
      left: 5%;
      img {
        margin-bottom: 20px;
      }
    }
  }

  .over-box-dialog {
    background-color: black;
    position: absolute;
    top: 0;
    display: none;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    opacity: 0.8;
  }
  .down-dialog {
    position: absolute;
    width: 100%;
    bottom: -100%;
    display: none;
    z-index: 10000;
    animation: handRotate2 0.75s forwards;
    img {
      width: 100%;
    }
    .trueBtn {
      position: absolute;
      width: 500px;
      bottom: 80px;
      left: calc(50% - 250px);
      img {
        width: 500px;
      }
    }
  }
  .selectHide {
    animation: handRotate3 0.75s forwards;
  }
  .video-yuan {
    position: relative;
    z-index: 20002;
    width: 100%;
    height: 100vh;
    display: none;
    .text{
      font-size: 40px;
      color: whitesmoke;
      position: absolute;
      text-align: center;
      width: 100%;
      top: 20px;
    }
    video {
      object-fit: fill;
      width: 100vw;
      height: 100vh;
    }
    .video-me {
      position: absolute;
      top: 100px;
      left: 20px;
      width: 200px;
    }
    .video-close {
      position: absolute;
      bottom: 100px;
      left: calc(50% - 90px);
      width: 180px;
    }
  }

  .dialog {
    display: none;
    position: absolute;
    z-index: 99999999;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    img {
      width: 600px;
      display: block;
      margin: 0 auto;
      margin-top: 300px;
    }
    .btn {
      // background: red;
      width: 400px;
      height: 100px;
      position: absolute;
      top: 850px;
      left: 180px;
    }
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  60% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
  70% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  80% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
  90% {
    -webkit-transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes handRotate {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes handRotate2 {
  0% {
    bottom: -100%;
  }
  100% {
    bottom: -5px;
  }
}
@keyframes handRotate3 {
  0% {
    bottom: -5px;
  }
  100% {
    bottom: -100%;
  }
}
@keyframes handRotate4 {
  0% {
    top: 200px;
  }
  100% {
    top: 230px;
  }
}
@keyframes handRotate5 {
  0% {
    top: 0px;
  }
  100% {
    top: 100px;
  }
}
@keyframes myfirst {
  0% {
    left: 10000%;
  }
  25% {
    left: 100%;
  }
  50% {
    left: 20%;
  }
  75% {
    left: -20%;
  }
  100% {
    left: -100%;
  }
}
